*{
	user-select: none;
}
body{
	height: 100%;
	background-image: url(../img/back.png);
	background-size: 100%;
}
// main
.main{
	margin-bottom: 6em;
	display: flex;
	justify-content: space-around;
	.left{
		width: 145px;
		margin-right: -9px;
		text-align: right;
	}
	.chart{
		position: relative;
		width: 539px;
		// overflow: hidden;
		text-align: center;
		.chartimg{
			position: absolute;
			display: none;
		}
		.chartimg:nth-of-type(1){
		    display: block;
		}
		.label{
			position: absolute;
			bottom: -5em;
			left: 1.5em;
			label{
				width: 30px;
				height:30px;
				color:#fff;
				font-size: 2.6rem;
				margin-left: 2px;
				cursor: pointer;
			}
		}
		
	}
	.right{
		width: 145;
	}
	
}
@media screen and (max-width:992px){
	.main{
		margin-bottom: 3em;
		.chart{
			.label{
				bottom: -2em;
				left: 1.5em;
			}
		}
	}
}
@media screen and (max-width:600px){
	.main{
		margin-bottom: 2em;
		.chart{
			.label{
				bottom: -2em;
				left: 1em;
				
			}
		}
	}
}
@media screen and (max-width:400px){
	.main{
		margin-bottom: 1em;
		.chart{
			.label{
				bottom: -2.2em;
				left: .2em;
				label{
					font-size: 2em;
				}
			}
		}
	}
}

//new
.new{
	.borderbox{
		margin-bottom:2em ;
		padding: 1px 10px;
		width: 100%;
		height:31px;
		background-image: url(../img/borderbox.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		.left{
			float: left;
			color: white;
			h3{
				font-weight: bold;
				cursor: pointer;
				font-size: 1.2em;
			}
			
		}
		.right{
			float: right;
			color: white;
			h3{
				font-weight: bold;
				cursor: pointer;
			}
			h3:hover{
				color:red;
			}
		}
	}
	.itembox{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item{
			width: 20%;
			text-align: center;
			margin-bottom: 1.5em;
			img{
				cursor: pointer;
			}
			h2{
				cursor: pointer;
				color: white;
				span{
					color:red;
					font-size: 1.5em;
				}
			}
			h3{
				
				color:white;
				font-size: 1.3em;
				margin-top: -.7em;
			}
			img{
				width: 95%;
			}
		}
	}
}
@media screen and (max-width:992px){
	.new{
		.borderbox{
			margin-bottom: 1.5em;
		}
		.itembox{
			.item{
				
			}
		}
	}
}
@media screen and (max-width:600px){
	.new{
		.borderbox{
			margin-bottom: 1em;
		}
		.itembox{
			.item{
				width:30%;
			}
		}
	}
}
@media screen and (max-width:400px){
	.new{
		.borderbox{
			margin-bottom: .5em;
		}
		.itembox{
			.item{
				width:50%;
			}
		}
	}
}

//center
.center{
	height: 15em;
	border: 1px solid white;
	border-radius: 20px;
	padding: 2em 5em;
	margin-bottom: 2.5em;
	.left{
		border-right: 1px solid white;
		padding-right: 3em;
		width: 50%;
		float: left;
		h2{
			float: left;
			font-size: 1.5em;
			color: white;
			margin-left: -.8em;
		}
		h3{
			float: right;
			color: white;
		}
		h3:hover{
			color:red;
		}
		ul{
			margin-top: 4em;
			li{
				list-style-type: disc;
				font-size: 1.3em;
				color: white;
				span{
					font-size: .9em;
					float: right;
				}
			}
			li:hover{
				color: red;
				cursor: pointer;
			}
		}
	}
	.right{
		float: right;
		width: 45%;
		.top1{
			color: white;
			margin-bottom: 1.5em;
		}
		.bottom1{
			.left1{
				float: left;
				img{
					margin-top: .5em;
					margin-right: 1em;
				}
			}
			.right1{
				color: white;
				h3{
					font-size: 1.4em;
					margin-top: -.7em;
					color:red;
				}
				h4{
					font-size: 1.2em;
					margin-top: -.5em;
				}
			}
		}
	}
}
@media screen and (max-width:992px){
	.center{
		padding: 2em 3em;
		.right{
			.bottom1{
				.right1{
					h2{
						font-size: .6em;
						line-height: 2em;
						margin-bottom: 1em;
					}
					h3{
						font-size: 1.2em;
						margin-bottom: .5em;
						line-height: 1.2em;
					}
					h4{
						font-size: 1em;
						
						line-height: 1.2em;
					}
				}
			}
		}
	}
}
@media screen and (max-width:710px){
	.center{
		height: 30em;
		.left{
			width: 100%;
			border-right: none;
			padding-right: 0em;
			border-bottom: 1px solid white;
			padding-bottom: 2em;
			margin-bottom: 2em;
		}
		.right{
			width: 100%;
			float: left;
			.bottom1{
				.left1{
					img{
						width: 100%;
					}
				}
				.right1{
					h2{
						font-size: 1.3em;
						margin-bottom: .4em;
					}
					h3{
						font-size: 1.3em;
						margin-bottom: .8em;
					}
					h4{
						font-size: 1.3em;
					}
				}
			}
		}
	}
}
@media screen and (max-width:500px){
	.center{
		.right{
			.bottom1{
				.left1{
					img{
						margin-top: -.6em;
					}
				}
				.right1{
					h2{
						font-size: 1em;
						margin-bottom: .5em;
						
					}
					h3{
						font-size: 1em;
						margin-bottom: .5em;
					}
					h4{
						font-size: 1em;
					}
				}
			}
		}
	}
}
@media screen and (max-width:410px){
	.center{
		.right{
			.bottom1{
				.left1{
					
					img{
						margin-top: -.8em;
					}
				}
				.right1{
					h2{
						font-size: .7em;
						margin-bottom: .5em;
						
					}
					h3{
						font-size: .7em;
						margin-bottom: .5em;
					}
					h4{
						font-size: .7em;
					}
				}
			}
		}
	}
}

//enjoy
.enjoy{
	margin-bottom: 2.5em;
	img{
		width: 100%;
		border-radius: 10px;
	}
}

//bottom
.bottom{
	.top1{
		width: 100%;
		float: left;
		line-height: 4em;
		border-top: 2px solid white;
		border-bottom: 2px solid white;
		ul{
			li{
				font-size: 1.8em;
				margin-left: 4em;
				float: left;
				cursor: pointer;
				color:white;
			}
		}
	}
	.bottom1{
		width: 100%;
		height: 6em;
		float: left;
		.left1{
			float: left;
			img{
				margin-top: 2em;
				margin-left: 6em;
			}
		}
		.right1{
			float: right;
			img{
				margin-top: 2em;
				margin-right: 9.7em;
			}
		}
	}
}

@media screen and (max-width:1200px){
	.bottom{
		.top1{
			line-height: 3em;
			ul{
				li{
					font-size: 1.6em;
				}
			}
		}
		.bottom1{
			.left1{
				img{
					margin-top: 2em;
					margin-left: 6em;
				}
			}
			.right1{
				float: right;
				img{
					margin-top: 2em;
					margin-right: 3em;
				}
			}
		}
	}
}
@media screen and (max-width:992px){
	.bottom{
		.top1{
			line-height: 3em;
			ul{
				li{
					font-size: 1.2em;
				}
			}
		}
		.bottom1{
			.left1{
				img{
					margin-top: 2em;
					margin-left: 4em;
				}
			}
			.right1{
				float: right;
				img{
					margin-top: 2em;
					margin-right: 3.5em;
				}
			}
		}
	}
}
@media screen and (max-width:750px){
	.bottom{
		.top1{
			line-height: 3em;
			ul{
				li{
					margin-left:3.5em;
					font-size: 1.2em;
				}
			}
		}
		.bottom1{
			.left1{
				img{
					margin-top: 2em;
					margin-left: 4em;
				}
			}
			.right1{
				float: right;
				img{
					margin-top: 2em;
					margin-right: 3.5em;
				}
			}
		}
	}
}
@media screen and (max-width:540px){
	.bottom{
		.top1{
			line-height: 3em;
			ul{
				li{
					margin-left: 1.8em;
					font-size: 1.2em;
				}
			}
		}
		.bottom1{
			.left1{
				img{
					margin-top: 2em;
					margin-left: 2em;
				}
			}
			.right1{
				float: right;
				img{
					margin-top: 2em;
					margin-right: 2em;
				}
			}
		}
	}
}
@media screen and (max-width:425px){
	.bottom{
		.top1{
			line-height: 3em;
			ul{
				li{
					margin-left: 2.6em;
					font-size: 1.2em;
				}
			}
		}
		.bottom1{
			.left1{
				img{
					margin-top: 2em;
					margin-left: 0em;
				}
			}
			.right1{
				float: right;
				img{
					margin-top: 2em;
					margin-right: 0em;
				}
			}
		}
	}
}
@media screen and (max-width:320px){
	.bottom{
		.top1{
			line-height: 3em;
			ul{
				li{
					margin-left: 2.8em;
					font-size: 1.2em;
				}
			}
		}
		.bottom1{
			.left1{
				img{
					margin-top: 2em;
					margin-left: 4.5em;
				}
			}
			.right1{
				
				img{
					margin-top: 2em;
					margin-right: 5.5em;
					margin-bottom: 2em;
				}
			}
		}
	}
}

